<template>
	<v-dialog v-model="visible" width="800px">
		<v-card>
			<v-card-text>
				<div class="pt-5">{{ modText }}分类标签</div>
			</v-card-text>
			<v-card-text>
				<v-form @submit.prevent.stop="onSave" ref="form">
					<v-row>
						<v-col sm="6">
							<v-text-field v-model="form.name" label="标签名称" :rules="rules.name" counter="32"/>
						</v-col>
						<v-col sm="6">
							<v-text-field v-model.number="form.sortId" label="排序" :rules="rules.sortId" type="number"/>
						</v-col>
						<v-col sm="2">
							<md-upload-image v-model="form.icon" label="ICON" :rules="rules.icon"/>
						</v-col>
						<v-col sm="5">
							<v-input v-model="form.color" :rules="rules.color" label="字体颜色" class="in-input">
								<v-color-picker v-model="fontColor"/>
							</v-input>
						</v-col>
						<v-col sm="5">
							<v-input v-model="form.backgroundColor" :rules="rules.color" label="背景颜色" class="in-input">
								<v-color-picker v-model="backgroundColor"/>
							</v-input>
						</v-col>
					</v-row>
				</v-form>
			</v-card-text>
			<v-card-actions class="justify-end">
				<v-btn @click="visible = false">取消</v-btn>
				<v-btn color="success" :loading="confirmLoading" @click="onSave">确认</v-btn>
			</v-card-actions>
		</v-card>
	</v-dialog>
</template>

<script>
import MdDialogMixins from '@/common/mixins/MdDialogMixins';
import CategoryApi from '@/common/api/CategoryApi';
import MdUploadImage from '@/components/widget/MdUploadImage';

export default {
	name: 'CategoryTypeDialog',
	components: {MdUploadImage},
	mixins: [MdDialogMixins],
	data() {
		return {
			rules: {
				color: this.$utils.formValidator(['required']),
				icon: this.$utils.formValidator(['required']),
				name: this.$utils.formValidator(['required', 'string', 'max:32', 'min:2']),
				sortId: this.$utils.formValidator(['required', 'integer', 'max:999999', 'min:0'])
			}
		}
	},
	computed: {
		fontColor: {
			get() {
				return this.form.color
			},
			set({hexa}) {
				this.form.color = hexa;
			}
		},
		backgroundColor: {
			get() {
				return this.form.backgroundColor
			},
			set({hexa}) {
				this.form.backgroundColor = hexa;
			}
		}
	},
	methods: {
		onSave() {
			if (!this.$refs.form.validate()) {
				return;
			}
			this.confirmLoading = true;
			let api = this.form.id ? CategoryApi.typeApi.update(this.form.id, this.form) : CategoryApi.typeApi.create(this.form)
			api.then(res => {
				this.$utils.responseHandler(res, true, true).then(() => {
					this.visible = false;
					this.$emit('success')
				})
			}).finally(() => this.confirmLoading = false)
		},
		add() {
			this.action({}, 'add')
		},
		edit(data) {
			this.action(data, 'add')
		},
		formData() {

		}
	}
}
</script>

<style scoped lang="sass">
.in-input
	::v-deep
		.v-input__slot
			display: block
</style>